<template>
  <div class="order-item" :class="{
    'pdl20': hiddenOp,
    'shipping-printed': shippingPrinted || isMediation || (order.accountTypeNum === 4 && order.orderStatus === 1 && order.status === 7),
    'not-print-shipping-tis-color': notPrintShippingTisColor || shippingCancelled,
    'unshipping-bgc': order.isSpecial && order.orderStatus === 1,
  }">
    <div class="header">
      <div class="left">
        <ignore-tag class="mgr10" :ignore="order.ignore"></ignore-tag>
        <order-status-tag
          class="mgr10"
          :order-status="order.orderStatus"
          :orderIsSpecial="order.isSpecial"
          :ignore="order.ignore"
          :account-type-num="order.accountTypeNum"
        ></order-status-tag>
        <!--<us-tag class="mgr10" :isUs="order.isTikTokUS"></us-tag>-->
        <order-custom-tag class="mgr10" :order="order"></order-custom-tag>
        <order-special-tag class="mgr10" :order="order"></order-special-tag>
        <order-logistic-tag class="mgr10"  :order-status="order.orderStatus" :logistic-type="order.logisticType" :order-before-time="order.orderBeforeTime"></order-logistic-tag>
        <el-tag
          type="cancel"
          effect="dark"
          class="order-status-tag mgr10"
          v-if="halfReturn"
        >
          {{$t('order.partialReturn')}}
        </el-tag>
        <storage-tag  class="mgr10" :orderData="order"></storage-tag>
        <div class="order-no mgr10">
          <span style="cursor: pointer" @click="jumpInfo">#{{order.orderId}}</span> 丨{{ order.createdDate }}
          <span v-if="order.accountTypeNum !== 6 && order.accountTypeNum !== 7">| {{ getCurrencySymbol() }}
            <span class="amount-color">{{order.amount}}</span>
          </span>
          <span v-if="order.accountTypeNum === 6">| $
            <span class="amount-color">{{order.amount}}</span>
          </span>
          <span> | {{order.userAccount}}</span>
        </div>
        <!--tagPackageMaterialName-->
        <package-tag class="mgr10" :packageMaterialName="$t('order.Packaging service')" v-if="order.packageSettleOrderId > 0"></package-tag>
        <package-tag class="mgr10" :packageMaterialName="$t('order.Packaging service')" v-if="(order.acquiescePackageMaterialId > 0 && order.orderStatus === 1) || (order.acquiescePackageMaterialId > 0 && order.orderStatus === 6)"></package-tag>
        <template v-if="!order.shipping">
          <span v-if="order.isSpecial && order.orderStatus === 1" class="font-red">{{ $t('当前订单没有运输单，系统无法处理，请联系客户线下处理') }}</span>
          <span v-if="order.isSpecial && order.orderStatus === 2" class="font-red">{{ $t('当前订单没有运输单') }}</span>
        </template>

        <template v-if="order.accountTypeNum === 1">
          <span v-if="shippingPrinted && order.shipping" class="font-red">{{$t('order.printedTips1',{time: order.shipping.dateFirstPrinted})}}</span>
        </template>

        <template v-if="order.accountTypeNum === 4">
          <span v-if="order.orderStatus === 1 && order.status === 7" class="font-red">{{$t('order.printedTips1',{time: order.platformPrintOff})}}</span>
        </template>

        <span v-if="isMediation" class="font-red">
          {{$t('订单正在售后中，请和客户确认是否需要发货')}}
        </span>
        <template v-if="order.accountTypeNum === 1 || order.accountTypeNum === 4">
          <span v-if="order.logisticsErrorMsg !== ''" class="font-red mgl10">{{ $t('打印失败') + ': ' + order.logisticsErrorMsg }}</span>
        </template>
        <span class="font-red" v-if="shippingCancelled">
          订单运输单已被取消，属于异常情况，请先与客户沟通确认
        </span>
      </div>
      <div class="right">
        <div class="buyer">
          {{order.showName}}
        </div>
      </div>
    </div>

    <div class="content">

      <div
          class="item"
          v-for="(orderGoods,index) in order.subOrders"
          :key="index"
          v-show="isExpand || index === 0"
      >
        <div class="label checkbox" v-if="!hiddenOp">
          <template v-if="!hiddenOp">
            <template v-if="index === 0">
              <template v-if="order.accountTypeNum === 1">
                <el-checkbox
                  v-model="checkOrder"
                  @change="checkOrderItem"
                  :disabled="orderDisable"
                ></el-checkbox>
              </template>
              <template v-if="order.accountTypeNum === 4">
                <el-checkbox v-model="checkOrder" @change="checkOrderItem" :disabled="queryParams.logisticType !== 'logisticsSheet' && ((order.orderStatus !== 1 && order.orderStatus !== 2) || order.ignore === 1 || order.performanceType === 2)"></el-checkbox>
              </template>
              <template v-if="order.accountTypeNum === 6">
                <el-checkbox v-model="checkOrder" @change="checkOrderItem" :disabled="(order.orderStatus !== 1 && order.orderStatus !== 2) || order.ignore === 1 || !order.shipping.shippingId"></el-checkbox>
              </template>
              <template v-if="order.accountTypeNum !== 1 && order.accountTypeNum !== 4 && order.accountTypeNum !== 6">
                <el-checkbox v-model="checkOrder" @change="checkOrderItem" :disabled="(order.orderStatus !== 1 && order.orderStatus !== 2) || order.ignore === 1"></el-checkbox>
              </template>
            </template>
          </template>

        </div>
        <div
          class="label expand "
          :class="{'expand--active':isExpand}"
          v-if="!hiddenOp"
        >
          <template v-if="!hiddenOp">
            <template v-if="index ===  0 && order.subOrderNum > 1">
              <div style="width: 100%;height: 100%" @click="expand($event)">
                <i class="el-icon-arrow-right" ></i>
              </div>
            </template>
          </template>

        </div>
        <div class="cell img">
          <template v-if="isExpand">
            <div class="img-box img-one ">
              <img :src="orderGoods.goodsImage"  alt="">
              <el-tag
                type="cancel"
                effect="dark"
                class="order-status-tag img-tag"
                v-if="orderGoods.isReturn"
              >
                {{$t('order.returned')}}
              </el-tag>
            </div>
          </template>

          <template v-else>
            <div class="img-box"
                 :class="{
                    'img-one': order.subOrderNum === 1
                 }"
            >
              <img :src="_orderGoods.goodsImage" v-for="(_orderGoods) in order.subOrders.slice(0,4)"  :key="_orderGoods.subOrderId"  alt="">
              <el-tag
                type="cancel"
                effect="dark"
                class="order-status-tag img-tag"
                v-if="orderGoods.isReturn && order.subOrderNum === 1"
              >
                {{$t('order.returned')}}
              </el-tag>
            </div>

          </template>

        </div>
        <div class="cell goods-info">
          <template v-if="isExpand || order.subOrderNum === 1">
            <p class="listing">
              <template v-if="!orderGoods.is_packet">
                <template v-if="order.accountTypeNum === 4">
                  {{ orderGoods.spuName }}
                </template>
                <template v-else>
                  {{ orderGoods.goodsId }}
                </template>
              </template>
              <span v-for="(subPackageMaterialArrItem,subPackageMaterialArrIndex) in subPackageMaterialArr" :key="subPackageMaterialArrIndex">
                <package-tag
                  class="mgl10"
                  :packageMaterialName="subPackageMaterialArrItem.tagTitle"
                  :typeNum="subPackageMaterialArrItem.tagTitleInfoNum"
                  v-if="(subPackageMaterialArrItem.sku === '' && subPackageMaterialArrItem.skuIndex === index) || (subPackageMaterialArrItem.sku !== '' && subPackageMaterialArrItem.sku === orderGoods.sku)"></package-tag>
              </span>

              <template v-if="orderGoods.isCombinationGoods === true && order.isCombinationGoods >= 1">
                <el-tooltip class="item" effect="dark" placement="top-start" style="margin-left: 10px; display: inline-block;">
                  <span slot="content" style="font-size: 14px;">
                  {{$t('table.组合商品')}}：
                    <br>
                    <span
                      v-for="(item, index) in orderGoods.combinationGoodsInfoData"
                      :key="index"
                    >
                      <template v-if="item.num > 0">
                        {{ item.sku }} * {{ item.num }}
                        <br>
                      </template>
                    </span>
                  </span>
                  <span>
                    <el-tag
                      type="success"
                    >
                    {{$t('table.组合商品')}}
                  </el-tag>
                  </span>
                </el-tooltip>
              </template>
            </p>
            <p class="title hidden-1">
              {{ orderGoods.goodsTitle }}
            </p>
            <p class="skuId" v-if="orderGoods.skuFitInfo === true">
              SKU：{{ orderGoods.sku || '-'}}<span style="color: #531dab">（{{$t('common.fit')}}）</span>
            </p>
            <p class="skuId" v-else>
              SKU：{{ orderGoods.sku || '-'}}
            </p>
            <p class="goods-attr hidden-1">
            <span
              v-for="attr in orderGoods.attributes"
              :key="attr.name"
              class="attr"
              style="color: #7F7F7F;"
            >
              {{attr.name}} : {{attr.value}}
              <span class="attr-link"> | </span>
            </span>
            </p>
          </template>
          <template v-else>
            <p class="title hidden-1">
              {{ orderGoods.goodsTitle }}
            </p>
          </template>
        </div>
        <div class="cell user-account center" v-if="false">
          {{order.userAccount}}
        </div>
        <div class="cell price center">
          <template v-if="(isExpand || order.singleItem) && order.accountTypeNum !== 7">
            <p class="price-mxn">
              <span class="currency" v-if="order.accountTypeNum === 6">$ </span>
              <span class="currency" v-else>{{ getCurrencySymbol() }} </span>
              <span class="amount-color">{{ orderGoods.amount || 0}}</span>
            </p>
          </template>

        </div>
        <div class="cell num center">
          <div class="text">
            {{ $t('common.num') }}：
            <template v-if="isExpand">
              <span class="number">{{orderGoods.num}}</span>
            </template>
            <template v-else>
              <span class="number">{{order.num}}</span>
            </template>
            <template v-if="order.toStock === 1 && (order.orderStatus === 4 || order.orderStatus === 5) && order.returnNum">
              <span class="mgl20">入库：</span>
              <template v-if="isExpand">
                <span class="number" v-if="orderGoods.returnNum">{{orderGoods.returnNum}}</span>
              </template>
              <template v-else>
                <span class="number" v-if="order.returnNum">{{order.returnNum}}</span>
              </template>
            </template>
          </div>
          <div class="text" style="margin-top: 5px" v-if="(!isExpand && order.stickerWeight) && order.accountTypeNum !== 7">
            {{ $t('common.weight') }}：
            <span class="number">{{order.stickerWeight}}g</span>
          </div>

        </div>
        <div class="cell operate">
          <template v-if="!hiddenOp">
            <template v-if="index === 0">
              <div class="line-1">

                <template v-if="(order.orderStatus === 1 || order.orderStatus === 9) && order.ignore === 1">
                  <forget-ignore class="mgb10 mgr10" :account-type-num="order.accountTypeNum" :order-id="order.orderId" @changeOrder="changeOrder"></forget-ignore>
                </template>
                <template v-if="(order.orderStatus === 1 || order.orderStatus === 9) && order.ignore === 0 && !order.isPacketOrder">
                  <ignore-order :order-ids="[order.orderId]" :type="1" :account-type-num="order.accountTypeNum" @changeOrder="changeOrder"></ignore-order>
                </template>
                <el-button @click="jumpInfo" type="success" class="mgb10">{{$t('order.reviewOrder')}}</el-button>
                <template v-if="order.shipping && order.shipping.status === 'ready_to_ship' && order.accountTypeNum === 1">
                  <el-button type="primary" @click="printShipping" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0 && order.shipping.printExcept === 0">
                    {{ $t('order.printShipping') }}
                  </el-button>
                  <el-button type="again" @click="printShipping" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0 && order.shipping.printExcept === 1">
                    {{$t('order.reprint')}}
                  </el-button>
                  <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="order.orderStatus === 2 && order.ignore === 0 && order.shipping.downShipping">
                    {{$t('order.downloadShipping')}}
                  </el-button>
                </template>

                <template v-if="order.accountTypeNum === 1">

                  <IntegratedLogisticsButton
                    :order="order"
                    :integratedLogisticsSettingData="integratedLogisticsSettingData"
                    :defaultLogisticsType="defaultLogisticsType"
                    @changeOrder="changeOrder"
                    style="display: inline"
                    class="mgl10"
                  >
                  </IntegratedLogisticsButton>

                  <template v-if="order.shipping && order.shipping.logisticMode === 'custom' && order.shipping.status === 'pending' && order.accountTypeNum === 1">

                    <template v-if="order.logisticsTrackingNumberData !== null">
                      <template v-if="order.logisticsTrackingNumberData.is_manual_operation === 0">
                        <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="order.orderStatus === 2 && order.ignore === 0">
                          {{$t('order.downloadShipping')}}
                        </el-button>
                      </template>
                    </template>
                    <template v-else>
                      <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="order.orderStatus === 2 && order.ignore === 0">
                        {{$t('order.downloadShipping')}}
                      </el-button>
                    </template>

                  </template>

                  <sticker-custom-button
                    :order="order"
                    @changeOrder="changeOrder"
                    style="display: inline"
                    class="mgl10"
                  ></sticker-custom-button>

                </template>

                <template v-if="order.accountTypeNum === 2">
                  <template v-if="order.shipping && order.shipping.printShipping">
                    <el-button type="primary" @click="batchOrderCreatePicking" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0">{{ $t('order.printShipping') }}</el-button>
                  </template>
                  <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="order.orderStatus === 2 && order.ignore === 0 && order.shipping.downShipping">
                    {{$t('order.downloadShipping')}}
                  </el-button>
                </template>
                <template v-if="order.accountTypeNum === 3">
                  <template v-if="order.shipping && order.shipping.printShipping">
                    <el-button type="primary" @click="batchOrderCreatePicking" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0">{{ $t('order.printShipping') }}</el-button>
                  </template>
                  <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="order.orderStatus === 2 && order.ignore === 0 && order.shipping.downShipping">
                    {{$t('order.downloadShipping')}}
                  </el-button>
                </template>

                <template v-if="order.accountTypeNum === 4">
                  <template v-if="order.shipping && order.shipping.shippingId">
                    <!--<el-button type="primary" @click="batchOrderCreatePicking" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0 && order.performanceType === 1">{{ $t('order.printShipping') }}</el-button>-->
                    <el-button type="primary" @click="printShipping" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0 && order.performanceType === 1">{{ $t('order.printShipping') }}</el-button>

                    <IntegratedLogisticsButton
                      :order="order"
                      :integratedLogisticsSettingData="integratedLogisticsSettingData"
                      :defaultLogisticsType="defaultLogisticsType"
                      @changeOrder="changeOrder"
                      style="display: inline"
                      class="mgl10"
                    >
                    </IntegratedLogisticsButton>

                    <sticker-custom-button
                      :order="order"
                      @changeOrder="changeOrder"
                      style="display: inline"
                      class="mgl10"
                    ></sticker-custom-button>

                  </template>
                  <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="order.orderStatus === 2 && order.ignore === 0 && order.shipping.downShipping">
                    {{$t('order.downloadShipping')}}
                  </el-button>
                </template>

                <template v-if="order.accountTypeNum === 6">
                  <!--<template v-if="order.shipping_type === 'SELLER'">-->
                    <!--<el-button type="primary" style="background-color: #0066C7; border-color: #0066C7;" @click="batchOrderCreatePickingByShipsaving" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0">{{ $t('order.自己承运') }}</el-button>-->
                  <!--</template>-->

                  <!--<template v-if="order.shipping_type === 'TIKTOK'">-->
                    <!--<el-button type="primary" style="background-color: #000000; border-color: #000000;" @click="batchOrderCreatePickingByTikTok" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0">{{ $t('order.TikTok承运') }}</el-button>-->
                  <!--</template>-->

                  <!--<el-button type="primary" style="background-color: #FC6347; border-color: #FC6347;" @click="batchOrderCreatePickingByOneself" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0">{{ $t('order.填写物流单号') }}</el-button>-->

                  <el-button type="primary" @click="printShipping" :loading="printLoading" v-if="order.shipping && order.shipping.shippingId && order.orderStatus === 1 && order.ignore === 0 && order.shipping_type === 'TIKTOK'">{{ $t('order.printShipping') }}</el-button>

                  <!--<IntegratedLogisticsButton-->
                  <!--  :order="order"-->
                  <!--  :integratedLogisticsSettingData="integratedLogisticsSettingData"-->
                  <!--  :defaultLogisticsType="defaultLogisticsType"-->
                  <!--  @changeOrder="changeOrder"-->
                  <!--  style="display: inline"-->
                  <!--  class="mgl10"-->
                  <!--&gt;-->
                  <!--</IntegratedLogisticsButton>-->

                  <sticker-custom-button
                    :order="order"
                    @changeOrder="changeOrder"
                    style="display: inline"
                    class="mgl10"
                  ></sticker-custom-button>

                  <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="order.orderStatus === 2 && order.ignore === 0 && order.shipping.downShipping">
                    {{$t('order.downloadShipping')}}
                  </el-button>
                </template>

                <template v-if="order.accountTypeNum === 7">
                  <template v-if="order.shippingType === 0">
                    <packet-to-stock-button
                      :data="order"
                      style="margin-left: 10px;"
                      @changeOrder="$emit('changeOrder', order.orderId)"
                    ></packet-to-stock-button>

                    <IntegratedLogisticsButton
                      :order="order"
                      :integratedLogisticsSettingData="integratedLogisticsSettingData"
                      :defaultLogisticsType="defaultLogisticsType"
                      @changeOrder="changeOrder"
                      style="display: inline"
                      class="mgl10"
                    >
                    </IntegratedLogisticsButton>

                    <sticker-custom-button
                      :order="order"
                      @changeOrder="changeOrder"
                      style="display: inline"
                      class="mgl10"
                    ></sticker-custom-button>
                  </template>
                  <template v-else>
                    <packet-to-stock-button
                      :data="order"
                      style="margin-left: 10px;"
                      @changeOrder="$emit('changeOrder', order.orderId)"
                    ></packet-to-stock-button>

                    <el-button type="primary" @click="printShipping" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0">{{ $t('order.printShipping') }}</el-button>
                  </template>


                  <el-button style="margin-left: 20px;" type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="order.orderStatus === 2 && order.ignore === 0 && order.shipping.downShipping">
                    {{$t('order.downloadShipping')}}
                  </el-button>
                </template>

                <template v-if="order.accountTypeNum === 8">
                  <template v-if="order.shipping && order.shipping.printShipping">
                    <!--<el-button type="primary" @click="printShipping" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0">{{ $t('order.printShipping') }}</el-button>-->
                    <el-button type="primary" @click="batchOrderCreatePicking" :loading="printLoading" v-if="order.orderStatus === 1 && order.ignore === 0">{{ $t('order.printShipping') }}</el-button>
                  </template>
                  <el-button type="primary" plain :loading="printLoading" @click="downLoadShipping" v-if="order.orderStatus === 2 && order.ignore === 0 && order.shipping.downShipping">
                    {{$t('order.downloadShipping')}}
                  </el-button>
                </template>

                <!--<template v-if="order.orderStatus === 1 && order.shipping && !order.shipping.printShipping">-->
                <!--  <template v-if="order.shipping.bufferingDate">-->
                <!--    <div>-->
                <!--      <el-button type="danger">{{order.shipping.bufferingDate}}{{$t('order.printableShipping')}}</el-button>-->
                <!--    </div>-->
                <!--  </template>-->
                <!--</template>-->
                <!--<template v-if="order.shipping.subStatus === 'manufacturing'">-->
                <!--  <div>-->
                <!--    <el-button type="danger" style="background-color: #FF7A45">{{$t('order.PresaleSign')}}</el-button>-->
                <!--  </div>-->
                <!--</template>-->
                <div v-if="order.shipping && order.shipping.estimatedHandlingLimit && order.orderStatus === 1 && false">
                  <span :class="{
                    'estimated-type-1': order.shipping.estimatedType === 1,
                    'estimated-type-2': order.shipping.estimatedType === 2,
                    'estimated-type-3': order.shipping.estimatedType === 3,
                  }">最晚发货时间：{{order.shipping.estimatedHandlingLimit}}</span>
                </div>
              </div>
            </template>
          </template>
          <!--<template v-if="order.shipping && order.shipping.isPrinted && !hiddenOp && (order.orderStatus === 1 || order.orderStatus === 6)">-->
          <!--  <div>-->
          <!--    {{$t('order.printedTips2')}}-->
          <!--  </div>-->
          <!--  <div>{{$t('order.printedTips3')}}</div>-->
          <!--</template>-->

          <template v-if="order.accountTypeNum === 1">
            <template v-if="shippingPrinted && order.shipping">
              <div>
                {{$t('order.printedTips2')}}
              </div>
              <div>{{$t('order.printedTips3')}}</div>
            </template>
          </template>

          <template v-if="order.accountTypeNum === 4">
            <template v-if="order.orderStatus === 1 && order.status === 7">
              <div>
                {{$t('order.printedTips2')}}
              </div>
              <div>{{$t('order.printedTips3')}}</div>
            </template>
          </template>

        </div>
      </div>

      <div>
        <template v-if="order.orderStatus === 1 && order.shipping && !order.shipping.printShipping && order.shipping.bufferingDate">
          <template v-if="order.shipping.bufferingDate">
            <p class="title hidden-1 not-print-shipping-tis-p" style="color: red;">
              {{order.shipping.bufferingDate}}{{$t('order.printableShipping')}}
            </p>
          </template>
        </template>
        <template v-else-if="order.orderStatus === 1 && order.shipping && order.shipping.subStatus === 'manufacturing'">
          <p class="title hidden-1 not-print-shipping-tis-p"  style="color: #03B615;">
            {{$t('order.PresaleSign')}}
          </p>
        </template>
        <template v-else-if="order.orderStatus === 1 && order.pickingFail">
          <p class="title hidden-1 not-print-shipping-tis-p"  style="color: #FC583E;">
            {{$t('order.订单面单下载失败，系统重新退回未处理状态，请稍后再试')}}
          </p>
        </template>
      </div>


    </div>


    <div class="order-amount-hover" v-if="order.amountType === 3 && order.orderStatus === 1 && loading === false">
      <div class="tips">{{ $t('pay.balanceTips3') }}</div>
    </div>

    <packet-pickup-date-dialog ref="packetPickupDate"></packet-pickup-date-dialog>
    <el-dialog
      :title="$t('order.填写物流单号')"
      :visible.sync="oneselfDialog"
      width="600px"
      :close-on-click-modal="false"
    >
      <div slot="title">
        <div class="title">
          <span>{{$t('order.订单编号')}}：#{{oneselfOrderId}}</span>
        </div>
      </div>
      <div class="content">
        <div class="form">
          <el-form ref="oneselfForm" :model="oneselfForm" :rules="oneselfRules"  label-position="left" label-width="135px" label-suffix=":">
            <el-form-item
              :label="$t('order.请选择承运商')"
              prop="shippingProvidersId"
            >
              <el-select style="width: 400px" v-model="oneselfForm.shippingProvidersId" :placeholder="$t('order.点击选择承运商')">
                <el-option v-for="oneselfItem in oneselfList" :key="oneselfItem.id" :label="oneselfItem.name" :value="oneselfItem.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('order.请填写物流单号')"
              prop="oneselfNumber"
            >
              <el-input style="width: 400px" v-model="oneselfForm.oneselfNumber" :placeholder="$t('order.请填写对应承运商的物流单号')"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="footer">
        <el-button size="medium" type="orange" @click="submitOneselfForm" :loading="oneselfLoading">{{$t('order.提交')}}</el-button>
      </div>

    </el-dialog>

    <el-dialog
      :visible.sync="shipsavingDialog"
      width="800px"
      :close-on-click-modal="false"
    >
      <div style="text-align: center; margin-top: 30px; margin-bottom: 60px;">
        <div style="margin-bottom: 30px;">
          <i class="el-icon-loading" style="font-size: 35px; color: #0099ff;"></i>
        </div>
        <div>
          <span style="color: #0099ff; font-size: 20px;">
          {{ $t('order.正在连接承运商系统，为您创建物流订单，请稍等……') }}
        </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getCountryIcon, getCurrencySymbol, jumpLink} from "@/utils/common";
import {
  batchOrderCreatePickingByTikTok,
  createPicking,
  downLoadShipping,
  printShippingV2,
  tiktokGetShippingProviders,
  batchOrderCreatePickingByOneself,
} from "@/api/order";
import OrderStatusTag from "@/views/order/components/OrderStatusTag.vue";
import IgnoreOrder from "@/views/order/components/IgnoreOrder.vue";
import OrderLogisticTag from "@/views/order/components/OrderLogisticTag";
import PackageTag from "@/views/order/components/PackageTag.vue";
import IgnoreTag from "@/views/order/components/IgnoreTag.vue";
import UsTag from "@/views/order/components/UsTag.vue";
import storageTag from "@/views/order/components/storageTag.vue";
import ForgetIgnore from "@/views/order/components/ForgetIgnore.vue";
import PacketToStockButton from "@/views/order/components/PacketToStockButton.vue";
import PacketPickupDateDialog from "@/views/order/components/PacketPickupDateDialog.vue";
import StickerCustomButton from "@/views/order/components/StickerCustomButton.vue";
import IntegratedLogisticsButton from "@/views/order/components/IntegratedLogisticsButton.vue";
import OrderCustomTag from "@/views/order/components/OrderCustomTag.vue";
import OrderSpecialTag from "@/views/order/components/OrderSpecialTag.vue";
import PacketPrintShipping from "@/views/order/components/PacketPrintShipping.vue";

export default {
  name: "OrderItem",
  props:{
    order:{
      required:true,
      type: Object,
    },
    queryParams:{
      type: Object,
    },
    subPackageMaterialArr:{
      type: Array,
      default: function(){return [];}
    },
    tagPackageMaterialName:{
      type: String,
    },
    integratedLogisticsSettingData:{
      type: Array,
    },
    defaultLogisticsType:{
      type: String,
    },
    selectOrderId:{
      type: Array,
      default: function(){return [];}
    },
    showExpand:{
      type: Boolean,
      default: false,
    },
    // 隐藏操作项
    hiddenOp:{
      type: Boolean,
      default: false
    },
    loading:{
      type: Boolean,
      default: false
    }
  },
  watch:{
    selectOrderId(){
      this.checkOrder = this.selectOrderId.some(item=> item === this.order.orderId)
    },
  },
  components:{
    // PacketPrintShipping,
    OrderSpecialTag,
    OrderCustomTag,
    StickerCustomButton,
    IntegratedLogisticsButton,
    PacketPickupDateDialog,
    ForgetIgnore,
    IgnoreTag,
    // UsTag,
    PackageTag,
    IgnoreOrder,
    OrderStatusTag,
    OrderLogisticTag,
    storageTag,
    PacketToStockButton,
  },
  computed:{
    // 部分退货
    halfReturn(){
      if(!this.order.subOrders){
        return false;
      }
      let flag = this.order.subOrders.some(item => item.isReturn === 1)
      let flag2 = this.order.subOrders.some(item => item.isReturn === 0)
      let flag3 = this.order.subOrders.every(item => item.isReturn === 1)
      return flag && flag2 && !flag3;
    },
    // 未处理的订单但是打印了面单
    shippingPrinted(){
      let flag = false
      if(this.order.orderStatus === 1 && this.order.shipping && this.order.shipping.dateFirstPrinted && !this.order.shipping.downShipping){
        flag = true
      }
      return flag
    },
    // 是否申请了售后
    isMediation(){
      return this.order.isMediation === 1
    },
    //不可打印面单与预售订单item底色
    notPrintShippingTisColor(){
      let flag = false
      if(this.order.orderStatus === 1 && this.order.shipping && !this.order.shipping.printShipping && this.order.shipping.bufferingDate){
        flag = true
      }
      if(this.order.orderStatus === 1 && this.order.shipping && this.order.shipping.subStatus === 'manufacturing'){
        flag = true
      }
      return flag
    },
    orderDisable(){
      // 特殊订单不能选择
      if(this.order.isSpecial){
        return true
      }
      let flag = this.queryParams.logisticType !== 'custom' &&
        (
          !this.order.shipping || (this.order.orderStatus !== 1 && this.order.orderStatus !== 2) ||
          this.order.ignore === 1 || this.order.shipping &&
          this.order.shipping.logisticMode === 'custom' && this.order.shipping.status === 'pending'
        )
      return flag
    },
    shippingCancelled(){
      return this.order.orderStatus === 1 && this.order.shipping && this.order.shipping.status === 'cancelled'
    }
  },
  created() {
    this.checkOrder = this.selectOrderId.some(item=> item === this.order.orderId)
    this.isExpand = this.showExpand
  },
  data(){
    return {
      getCountryIcon,
      isExpand: false,
      checkOrder: false,
      printLoading: false,
      ignoreLoading: false,
      // tiktok手动填写物流单
      oneselfDialog: false,
      oneselfLoading: false,
      oneselfList: [],
      oneselfOrderId: '',
      oneselfForm: {
        shippingProvidersId: '',
        oneselfNumber: '',
      },
      oneselfRules: {
        shippingProvidersId : [{ required: true, trigger: 'blur', message: this.$t('order.请选择承运商') }],
        oneselfNumber: [{ required: true, trigger: 'blur', message: this.$t('order.请填写物流单号') }]
      },
      // tiktok链接Shipsaving
      shipsavingDialog: false,
      shipsavingLoading: false,
    }
  },
  methods:{
    getCurrencySymbol,
    jumpLink,
    expand(e){
      this.isExpand = !this.isExpand;
    },
    checkOrderItem(){
      this.$emit('changeSelectOrderId',this.order.orderId,this.checkOrder,this.order)
    },
    // 跳转到订单详情页
    jumpInfo(){
      this.$router.push({
        name:'orderInfo',
        query:{
          orderId: this.order.orderId,
          accountTypeNum: this.order.accountTypeNum
        }
      })
    },
    // 打印面单
    printShipping(){
      this.printLoading = true;
      printShippingV2(this.order.orderId,{
        accountTypeNum: this.order.accountTypeNum,
      })
        .then(res=>{
          this.printLoading = false;
          console.log(res)
          if(res.headers['content-type'].match(/application\/pdf/) && res.status === 200 || this.order.accountTypeNum === 6 && res.status === 200){
            this.printLoading = false;
            const pdfFile = window.URL.createObjectURL(
              new Blob([res.data], { type: "application/pdf" })
            );
            // 跳转页面预览
            window.open(pdfFile);
            // 60秒后释放
            setTimeout(()=>{
              URL.revokeObjectURL(pdfFile); //释放URL对象
            },60000)

            this.$emit('changeOrder',this.order.orderId)
          } else {
            if (res.headers['content-type'].match(/application\/json/)){

              // 创建一个FileReader对象
              const reader = new FileReader();

              // 定义一个回调函数，处理读取完成后的操作
              reader.onload = (event) => {
                // event.target.result 包含了Blob对象的内容作为字符串
                let blobAsText = event.target.result;

                // 在这里，你可以处理blobAsText，比如将其显示在页面上或执行其他操作
                const data = JSON.parse(blobAsText);
                console.log(data)
                if(data.error === 210){
                  this.$message({
                    showClose: true,
                    message: data.message,
                    type: 'error',
                    duration: 6000,
                  });
                }else{
                  this.$errorMessage('服务繁忙请稍后再试');
                  return;
                }
              };

              // 开始读取Blob对象并以文本形式返回

              reader.readAsText(res.data);
            }else{
              this.$errorMessage('服务繁忙请稍后再试');
              return;
            }
          }
        })
    },
    // 下载面单
    downLoadShipping(){
      this.printLoading = true
      const postData = {
        orderIds: [this.order.orderId],
        accountTypeNum: this.order.accountTypeNum,
      }
      downLoadShipping(postData)
        .then(res=>{
          console.log(res)
          this.printLoading = false;
          if(res.type === 'application/json'){
            this.$errorMessage('系统繁忙，请稍后再试');
            return;
          }
          this.printLoading = false;
          const pdfFile = window.URL.createObjectURL(
            new Blob([res.data], { type: "application/pdf" })
          );
          // 跳转页面预览
          window.open(pdfFile);
          // 60秒后释放
          setTimeout(()=>{
            URL.revokeObjectURL(pdfFile); //释放URL对象
          },60000)
        })
    },
    // 订单状态改变
    changeOrder(){
      this.$emit('changeOrder',this.order.orderId)
    },
    // 生成拣货单
    batchOrderCreatePicking(){
      const postData = {
        orderIds: [this.order.orderId],
        accountTypeNum: this.order.accountTypeNum,
      }
      this.printLoading = true;
      createPicking(postData)
        .then(res=>{
          this.printLoading = false
          if(res.error !== 0){
            this.$errorMessage(res.message)
          }else{
            const pickingNo = res.data.pickingNo
            let routeUrl = this.$router.resolve({
              name: 'packInfo',
              query: {
                'pickingNo' : pickingNo,
              }
            })
            // 新标签打开路由
            window.open(routeUrl.href, '_blank');
            // 刷新当前页面
            this.$router.go(0)
          }
        })
    },

    // tiktok贴单流程
    batchOrderCreatePickingByTikTok(){
      const postData = {
        orderIds: [this.order.orderId],
        accountTypeNum: this.order.accountTypeNum,
      }
      this.printLoading = true;
      batchOrderCreatePickingByTikTok(postData)
        .then(res=>{
          this.printLoading = false
          if(res.error !== 0){
            this.$errorMessage(res.message)
          }else{
            const pickingNo = res.data.pickingNo
            let routeUrl = this.$router.resolve({
              name: 'packInfo',
              query: {
                'pickingNo' : pickingNo,
              }
            })
            // 新标签打开路由
            window.open(routeUrl.href, '_blank');
            // 刷新当前页面
            this.$router.go(0)
          }
        })
    },

    // Shipsaving物流承接贴单流程
    batchOrderCreatePickingByShipsaving(){
      this.printLoading = true;
      this.printLoading = false
      this.shipsavingDialog = true;
    },

    // 填写物流贴单流程
    batchOrderCreatePickingByOneself(){
      const postData = {
        orderId: this.order.orderId,
      }
      this.printLoading = true;
      tiktokGetShippingProviders(postData)
        .then(res=>{
          this.printLoading = false
          if(res.error === 0){
            this.oneselfDialog = true
            this.oneselfList = res.data
            this.oneselfOrderId = this.order.orderId
          } else {
            this.$errorMessage(res.message)
          }
        })
    },

    // 提交填写物流单号
    submitOneselfForm(){
      this.$refs.oneselfForm.validate(valid =>{
        if(valid){
          const postData = {
            orderIds: [this.order.orderId],
            oneselfNumber: this.oneselfForm.oneselfNumber,
            shippingProvidersId: this.oneselfForm.shippingProvidersId,
            accountTypeNum: this.order.accountTypeNum,
          }
          this.oneselfLoading = true
          batchOrderCreatePickingByOneself(postData)
            .then(res=>{
              this.oneselfLoading = false
              if(res.error === 0){
                // const pickingNo = res.data.pickingNo
                // let routeUrl = this.$router.resolve({
                //   name: 'packInfo',
                //   query: {
                //     'pickingNo' : pickingNo,
                //   }
                // })
                // // 新标签打开路由
                // window.open(routeUrl.href, '_blank');
                // // 刷新当前页面
                // this.$router.go(0)
              }else{
                this.$errorMessage(res.message)
              }
            })
        }
      })
    },

    // 提交取件地址并且小包创建拣货单
    packetSubmitPickupDateCreatePicket() {
      if (!this.order.shipmentOrderNum) {
        this.$refs.packetPickupDate.show(this.order.orderId)
          .then(pickupDate => {
            console.log('pickupDate', pickupDate);
            this.batchOrderCreatePicking();
          })
          .catch(error => {
            console.error('packetSubmitPickupDateCreatePicket error', error);
          });
      } else {
        this.batchOrderCreatePicking();
      }

    },

  }
}
</script>

<style scoped lang="scss">
.order-amount-hover{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(242, 242, 242, 0.8);
  z-index: 1999;
  .tips{
    text-align: center;
    line-height: 150px;
    color: #ff0000;
  }
}
.order-item{
  position: relative;
  min-height: 150px;
  width: 100%;
  padding: 10px 10px;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .header{
    font-size: 13px;

    display: flex;
    justify-content: space-between;
    .order-no{
      display: inline-block;
      font-weight: bold;
      margin-left: 10px;
    }
    margin-bottom: 10px;
  }
}
.order-status-tag{
  font-weight: bold;
}
.content{

  .item{
    p{
      margin: 0;
      padding: 0;
    }
    font-size: 13px;
    display: flex;
    margin: 5px 0;
    .checkbox{
      text-align: center;
      width: 50px;
      line-height: 100px;
    }
    .expand{
      position: relative;
      color: #666;
      font-size: 12px;
      width: 20px;
      height: 20px;
      text-align: center;
      margin-right: 3px;
      top: 43px;
      cursor: pointer;
    }
    .expand--active{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      left: -2px;
    }
    .img{
      width: 100px;
      height: 100px;
      margin-right: 5px;
    }
    .center{
      text-align: center;
    }
    .goods-info{
      //line-height: 20px;
      width: 600px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 90px;
      .listing{
        font-weight: 650;
        font-size: 13px;
        color: #555555;
      }
      .title{
        font-weight: 500;
        color: #AAAAAA;
      }
      .skuId{
        font-weight: 500;
        color: #555555;
      }
      .sku{
        font-weight: 400;
        color: #7F7F7F;
      }
    }
    .img-box{
      width: 90px;
      height: 90px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 3px;
      background-color: #eee;
      border-radius: 5px;

      img{
        width: 40px;
        height: 40px;
      }
    }
    .img-one {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      img{
        width: 80px;
        height: 80px;
      }
    }
    .price{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 500;
      p{
        margin: 5px auto;
      }
      .currency{
        color: #AAAAAA;
      }
      .price-num{
        color: #009C46;
      }
    }
    .num{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      font-weight: 600;
      .text{
        color: #AAAAAA;
      }
      .number{
        color: #FC6347;
      }
    }
    .user-account{
      display: flex;
      flex-direction: row;
      align-items: center;
      font-weight: 600;
    }
    .operate{
      margin-left: auto;
      min-width: 300px;
      //line-height: 100px;
      text-align: right;
      box-sizing: border-box;
      text-overflow: ellipsis;
      vertical-align: middle;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .is-right{
      text-align: right;
    }
  }
  .amount-color{
    color: #03B615;
  }
}
.pdl20{
  padding-left: 20px;
}
.img-box{
  position: relative;
}
.img-tag{
  position: absolute;
  top: 0;
  left: 0;
}
.estimated-type-1{
  color: #797979
}
.estimated-type-2{
  color: #FF0000;
  font-weight: bold;
}
.estimated-type-3{
  font-weight: bold;
  color: #8400FF
}
.shipping-printed{
  background-color: #FDF5E9;
}
.not-print-shipping-tis-color{
  background-color: #f5f5f5;
}
.unshipping-bgc{
  background-color: #f5f5f5;
}
.not-print-shipping-tis-p{
  margin-top: -10px;
  margin-bottom: -5px;
  font-weight: 650;
  font-size: 13px;
}
</style>
